    <!DOCTYPE html>  
    <html>  
      <head>  
        <style type="text/css">  
            table{  
                border-top:solid 1px black;   
                border-left:solid 1px black;  
                font-size:12px;  
                width: 100%;  
            }  
            th{  
                white-space: nowrap;  
            }  
            th,td{  
                border-right-style: solid;  
                border-right-width: 1px;  
                border-bottom-style: solid;  
                border-bottom-width: 1px;  
                height:30px;  
            }  
            .dragable{  
                width: 3px;  
                height:100%;   
                background-color: white;  
                float: right;  /*这个样式与效果有一定关系,其他无所谓*/  
                cursor: col-resize;  
            }  
        </style>  
        <script type="text/javascript">  
            var draging = false;//是否拖拽中  
            var dragElement = null;//当前拖拽的th  
            var offsetLeft = 0;//当前拖拽的th与绝对左坐标  
            var offsetWidth = 0;//当前拖拽的th的绝对宽度  
            function mousedown(){  
                if(draging) return;  
                draging = true;  
                dragElement = window.event.srcElement.parentNode;  
                offsetLeft = dragElement.offsetLeft;  
                document.body.style.cursor = "col-resize";  
                document.body.onselectstart = function(){return false;};//拖拽的时候，鼠标滑过字的时候，不让选中(默认鼠标选中字的效果,大家都知道)  
            }  
            function mouseup(){  
                draging = false;  
                dragElement = null;  
                document.body.style.cursor = "auto";  
                document.body.onselectstart = function(){return true};  
            }  
            function mousemove(){  
                if(draging && dragElement){  
                    var width = event.clientX-offsetLeft;  
                    if(width>0){  
                        dragElement.style.width = width;  
                        offsetWidth = dragElement.offsetWidth;  
                    }else{  
                        dragElement.style.width = offsetWidth;  
                    }  
                }  
            }  
        </script>  
      </head>  
      <body onmousemove="mousemove();" onmouseup="mouseup();">  
        <table cellpadding="0" cellspacing="0">  
            <thead>  
                <tr>  
                    <th style="width: 120px;">编号<span class="dragable" onmousedown="mousedown();">&nbsp;</span></th>  
                    <th style="width: 120px;">姓名<span class="dragable" onmousedown="mousedown();">&nbsp;</span></th>  
                    <th style="width: 120px;">年龄<span class="dragable" onmousedown="mousedown();">&nbsp;</span></th>  
                    <th>备注</th>  
                </tr>  
            </thead>  
            <tbody>  
                <tr>  
                    <td>1</td>  
                    <td>Siuon</td>  
                    <td>100</td>  
                    <td>JavaEE工程师...</td>  
                </tr>  
            </tbody>  
        </table>  
      </body>  
    </html>  